<template>
    <div id="note-content">
        <div class="cate-info">
          <!-- <el-popover ref="popover2" placement="bottom" title="标题" width="200" trigger="click" :v-model="cate_selecter_visiable">
            <el-tree :data="category_data" :props="defaultProps" @node-click="cate_selected()"></el-tree>
          </el-popover>
          当前路径：<el-button type="text" v-popover:popover2>./</el-button> -->
          <el-tree :data="category_data" :props="defaultProps" @node-click="cate_selected"></el-tree>
          <ul>
            <li v-for="item in note_list" :key="item.note_id" class="note-list-item">
              <a href="#">{{ item.note_title}}</a>
            </li>
          </ul>
        </div>
        <div class="note-info">
            <div class="note-info-header">
            分类：<el-input class="note-info-item"></el-input>
            标题：<el-input v-model="note_data.note_title" class="note-info-item"></el-input>
            标签：<el-select v-model="tags" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
                    <el-option v-for="item in tag_list" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                 </el-select>
            <el-button @click="Ajax_PostNote()">提交</el-button>
            <el-button @click="test()">测试</el-button>
        </div>
        <markdown-editor v-model="note_data.note_content" :configs="configs" ref="markdownEditor" preview-class="markdown-body"></markdown-editor>
        </div>
    </div>
</template>

<script>
import { markdownEditor } from "vue-simplemde";

export default {
  components: {
    markdownEditor
  },
  data() {
    return {
      configs: {
        status: true,
        height: 500,
        initialValue: "Hello BBK",
        autoDownloadFontAwesome: false,
        renderingConfig: {
          codeSyntaxHighlighting: true,
          highlightingTheme: "atom-one-light"
        }
      },
      note_list: [],
      note_data: {
        note_title: "",
        note_content: "",
        cate_id: 1
      },
      cate_selecter_visiable: false,
      category_data: [],
      defaultProps: {
        children: "child",
        label: "cate_name"
      },
      tags: [],
      tag_list: []
    };
  },
  mounted() {
    this.Ajax_GetCategoryList();
  },
  methods: {
    Ajax_PostNote() {
      this.$axios.post("/mqnote/note", this.note_data).then(res => {
        if (res.data.code == 0) {
          alert("OK");
        }
      });
    },
    Ajax_GetNoteList(id) {
      this.$axios.get("/mqnote/note/" + id).then(res => {
        if (res.data.code == 0) {
           this.note_list = res.data.data;
        }
      });
    },
    Ajax_GetTagList() {
      this.$axios.get("/api/tag").then(res => {
        if (res.data.code == 0) {
          this.note_list = res.data.data;
        }
      });
    },
    Ajax_GetCategoryList() {
      this.$axios.get("/mqnote/category").then(res => {
        if (res.data.code == 1) {
          this.category_data = res.data.data;
        }
      });
    },
    test() {
      console.log(this.category_data);
    },
    cate_selected(category) {
      this.Ajax_GetNoteList(category.cate_id);
    }
  }
};
</script>

<style scoped>
@import "~simplemde/dist/simplemde.min.css";
@import "~github-markdown-css";

.cate-info {
  position: absolute;
  top: 20px;
  bottom: 20px;
  width: 200px;
}

.note-info {
  position: absolute;
  top: 20px;
  left: 240px;
  bottom: 20px;
  right: 20px;
}

.note-info-header {
  margin: 10px;
}

.note-info-item {
  width: 200px;
  display: inline-block;
}

.note-list-item{
  list-style-type: none;
}

.note-list-item a{
  text-decoration: none;
}
</style>